<template>
  <view v-if="setting">
    <u-navbar title="提现" title-size="36" back-icon-color="#333" title-color="#333">
      <!-- <view slot="right">
				<view @click="routeTo('/other/withdrawal-order/withdrawal-order')" style="margin-right: 20rpx;">
					提现记录
				</view>
			</view> -->
    </u-navbar>
    <view class="contentView">
      <view class="headTitle">提现金额</view>
      <view class="inputView">
        <view>¥</view>
        <input
          class="inputData"
          :placeholder="
            `输入提现金额,须不小于：` + (setting.limitMinMoney * 0.01).toFixed(2) + `元`
          "
          placeholder-style="color:#CDCDCD"
          v-model="cash_amount"
        />
      </view>
      <view class="moneyView"
        >可提现金额¥{{ (setting.totalMoney * 0.01).toFixed(2) }},提现手续费约{{
          ((cash_amount * setting.feePercent) / 100).toFixed(2)
        }}；
        <text @click="onAllPost()">全部提现</text>
      </view>
    </view>
    <view class="contentView">
      <!-- <view @click="current = 1" class="itemView">
				<u-icon name="/static/wxzf.png" size="48"></u-icon>
				<view class="itemTitle">
					提现至微信
					<view class="itemTitle-tip" v-if="setting && setting.wechat">
						<text style="color: #999999;">已绑定：张三</text>
						[更换]
					</view>
					<view class="itemTitle-tip" v-else>
						<text style="color: #999999;">未绑定</text>
						[去绑定]
					</view>
				</view>
				<u-icon v-if="current == 1" name="/static/selected.png" size="36"></u-icon>
				<view v-else class="checked"></view>
			</view> -->

      <!-- <view @click="current = 2" class="itemView">
				<u-icon name="/static/img/zfbzf.png" size="50"></u-icon>
				<view class="itemTitle">
					提现至支付宝
					<view class="itemTitle-tip">
						已绑定：136*****556[更换]
					</view>
				</view>
				<u-icon v-if="current == 2" name="/static/img/xzz2.png" size="36"></u-icon>
				<view v-else class="checked"></view>
			</view> -->

      <view class="itemView">
        <u-icon name="/static/yhk.png" size="64"></u-icon>
        <view class="itemTitle" @click="toBankList()">
          提现至银行卡
          <view class="itemTitle-tip" v-if="cardNo">
            <text style="color: #999999">已绑定：{{ cardNo }}</text>
            [更换银行卡]
          </view>
          <view class="itemTitle-tip" v-else style="color: #999999"> 请绑定本人银行卡</view>
        </view>
        <u-icon v-if="current == 3" name="/static/selected.png" size="36"></u-icon>
        <view @click="checkCurrent(3)" v-else class="checked"></view>
      </view>
    </view>

    <view class="applyView" @click="onApply()">申请提现</view>
    <view class="tipsView dis-flex flex-y-center">
      <view @click="routeTo('/attract/withdrawal-list')">提现记录</view>
      <view style="margin: 0 20rpx">|</view>
      <view @click="routeTo('/universal/webcontent/webcontent?key=withdraw')">提现说明</view>
      <!-- <view>1、提现手续费约0.1%；（到账金额会根据银行卡实际手续费率扣除）</view> -->
      <!-- <view>2、提现时间：9:00~18:00 周一至周六</view> -->
      <!-- <view>3、到账时间72小时内</view> -->
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showSvipModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content">
            <view class="tl">温馨提示</view>
            <view class="des">尊敬的用户，您还未开通平台会员， 您暂时不能佣金提现操作！</view>
            <view class="bt" @click="toSvip()">立即开通</view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="showSvipModel = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="showJijinModel"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content jijin-content">
            <view class="tl">温馨提示</view>
            <view class="des" style="padding: 10rpx; margin-bottom: 20rpx"
              >尊敬的会员用户，您提现金额为
              <text style="font-weight: 600; font-size: 36rpx; margin-right: 10rpx">¥198.00</text>
              本次扣除
              <text style="font-weight: 600; font-size: 36rpx; margin: 0 20rpx; color: #fa453c"
                >¥1.98
              </text>
              到基金会
            </view>
            <u-line></u-line>
            <view class="check-group dis-flex flex-y-center">
              <view class="check-item dis-flex flex-y-center">
                <view @click="isChecked = true" v-if="!isChecked" class="select"></view>
                <u-icon v-else name="/static/selected.png" size="36"></u-icon>
                <text style="margin-left: 20rpx">我已同意</text>
              </view>
              <view class="check-item dis-flex flex-y-center">
                <view @click="isChecked = false" v-if="isChecked" class="select"></view>
                <u-icon v-else name="/static/selected.png" size="36"></u-icon>
                <text style="margin-left: 20rpx">我不同意</text>
              </view>
            </view>
            <view class="contect">联系客服</view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="showJijinModel = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="successPopup"
        backgroundColor="transparent"
        mode="center"
        width="610"
        height="auto"
        border-radius="20"
        :mask-close-able="false"
      >
        <view class="tishi-box">
          <view class="content svip-content">
            <u-icon
              style="margin-bottom: 30rpx; margin-top: 10rpx"
              name="/static/sussces.png"
              size="72"
            ></u-icon>
            <view class="des" style="padding: 0 70rpx; margin-bottom: 20rpx"
              >您已提现成功，恭喜您爱心捐赠
              <text style="font-weight: 600; font-size: 36rpx; margin-right: 10rpx"
                >¥{{ welfarePrice }}
              </text>
            </view>
            <view
              class="bt"
              style="width: 320rpx; margin-top: 50rpx"
              @click="routeTo('/jijin/index')"
              >进入公益基金中心
            </view>
          </view>
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="successPopup = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 3,
      successPopup: false,
      showSvipModel: false,
      showJijinModel: false,
      balance: 0,
      cardNo: '',
      cardId: '',
      realName: '',
      cardName: '',
      cash_amount: '',
      isVip: false,
      isChecked: false,
      setting: '',
      welfarePrice: 0,
      totalMoney: 0
    }
  },
  onLoad() {
    this.initData()
    this.isVip = uni.getStorageSync('userInfo').isVip
    // console.log('this.isVip',this.isVip)
  },
  methods: {
    initData() {
      let self = this
      self.$u.api.getMyBills().then((res) => {
        self.balance = (res.data.balance * 0.01).toFixed(2)
      })
      self.$u.get('/app-api/pay/cash-out/preview').then((res) => {
        self.setting = res.data
      })
      self.$u.api.getBankList().then((res) => {
        // console.log(res.data.length)
        if (res.data && res.data.length > 0) {
          self.cardNo = res.data[0].cardNo
          self.realName = res.data[0].realName
          self.cardName = res.data[0].cardName
          self.cardId = res.data[0].id
        }
      })
    },
    onClose() {
      this.successPopup = false
      uni.navigateBack()
    },
    toSvip() {
      this.showSvipModel = false
      this.$u.route('/users/svip')
    },
    onAllPost() {
      this.cash_amount = (this.setting.totalMoney * 0.01).toFixed(2)
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    toBankList() {
      this.routeTo('/other/bank-card-list/bank-card-list')
      uni.$on('list', (res) => {
        console.log('res', res)
        this.cardNo = res.cardNo
        this.realName = res.realName
        this.cardName = res.cardName
        this.bankAddress = res.bankAddress
        this.cardId = res.id
        uni.$off('list')
      })
    },
    checkCurrent(index) {
      if (index == 3 && !this.cardNo) {
        this.$u.toast('请先绑定银行卡')
        return
      }
      this.current = index
    },
    onApply() {
      let self = this
      if (!self.isVip) {
        this.showSvipModel = true
        return
      }
      if (this.$u.test.isEmpty(this.cash_amount)) {
        this.$u.toast('请输入提现金额')
        return
      }
      if (this.setting.limitMinMoney <= this.cash_amount) {
        this.$u.toast('金额超出可提现金额')
        return
      }
      if (this.cash_amount < (this.setting.limitMinMoney * 0.01).toFixed(2)) {
        this.$u.toast('提现金额不小于' + (this.setting.limitMinMoney * 0.01).toFixed(2) + '元')
        return
      }
      if (this.current == 1 && this.$u.test.isEmpty(this.setting?.wechat)) {
        this.$u.toast('请先绑定微信')
        return
      }
      if (this.current == 3) {
        if (this.$u.test.isEmpty(this.cardId)) {
          this.$u.toast('请先选择银行卡')
          return
        }
      }
      //公益基金
      // if(!this.isChecked){
      // 	this.showJijinModel = true;
      // 	return
      // }
      self.$u
        .post('/app-api/pay/cash-out/apply', {
          accountType: self.current == 1 ? 'wechat' : 'bank',
          bankId: this.cardId || '',
          applyPrice: this.cash_amount * 100
        })
        .then((res) => {
          if (res.code === 0) {
            self.cash_amount = ''
            self.welfarePrice = res.data.welfarePrice
            //公益基金
            // self.successPopup = true;
            uni.redirectTo({
              url: '/attract/withdrawal-list'
            })
          } else {
            self.$u.toast(res.msg)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('withdrawal.css');

/* page {
		background: #F7F7F7;
	} */
.itemView:last-child {
  border: none;
}

::v-deep.tishi-warpper .teshu .u-mode-center-box {
  background-color: transparent !important;
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }

  .ts-close {
    margin: auto;
    margin-top: 50rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.jijin-content {
  padding: 0 !important;
}

.svip-content {
  text-align: center;

  .tl {
    padding: 50rpx 20rpx 40rpx 20rpx;
    margin: auto;
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
  }

  .des {
    font-size: 30rpx;
    line-height: 50rpx;
    padding: 20rpx;
  }

  .bt {
    width: 280rpx;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin: auto;
    margin-top: 70rpx;
    margin-bottom: 10rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #ffffff;
  }

  .check-group {
    margin: 65rpx 100rpx;
    justify-content: space-between;

    .select {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      border: 1px solid #999999;
    }
  }

  .contect {
    width: 100%;
    height: 100rpx;
    background: #10a28f;
    font-size: 34rpx;
    color: #ffffff;
    line-height: 100rpx;
    text-align: center;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
  }
}
</style>
